<template>
  <div class="bgc-white" style="height: calc(100vh - 112px)">
    <div class="ta-center tc-l1 fs18 fw500 pv16 fh24 border-bottom">服务费项</div>
    <div class="p24">
      <div class="flex-center-between">
        <a-input-search v-model="nameSearch" placeholder="请输入服务项名称" style="width: 240px" @change="onNameChange" />
        <a-button type="primary" @click="doAdd">
          <a-icon type="plus"></a-icon>
          <span>新增服务费项</span>
        </a-button>
      </div>
      <a-spin v-if="lst.length > 0" :spinning="loading">
        <div class="mt24 flex flex-wrap" style="margin-right: -24px">
          <div v-for="item in lst" :key="item.id" class="br4 border p16 flex mb24 mr24" style="width: 267px">
            <span class="tc-theme fw500 fs24 mr8 flex-shrink-0 fh22">
              <i class="iconfont icon-fuwufeizhangdan" style="font-size: 22px"></i>
            </span>
            <div class="flex-1">
              <div class="flex-center-between fh22">
                <a-tooltip :title="item.name">
                  <div class="ellipsis fs16 fw500" style="width: 164px">{{ item.name }}</div>
                </a-tooltip>
                <a-dropdown>
                  <a-icon type="ellipsis" class="pointer" style="font-size: 18px; font-weight: bold; color: var(--primary)" />
                  <a-menu slot="overlay">
                    <a-menu-item @click="doEdit(item)">编辑</a-menu-item>
                    <a-menu-item @click="doDel(item)">删除</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div>
              <div class="tc-l2 mt12">
                <span>服务费金额：</span>
                <span>{{ item.amount }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-center-end">
          <a-pagination
            v-model="pagination.current"
            :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :showQuickJumper="pagination.showQuickJumper"
            :showSizeChanger="pagination.showSizeChanger"
            :showTotal="pagination.showTotal"
            :size="pagination.size"
            :pageSizeOptions="pagination.pageSizeOptions"
            @change="onShowSizeChange"
            @showSizeChange="onShowSizeChange"
          />
        </div>
      </a-spin>
      <a-empty v-else style="margin-top: 100px"></a-empty>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" destroyOnClose @ok="onOk" @cancel="onCancel">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
        <a-form-item label="服务费项">
          <a-input v-decorator="['name', { rules: [{ required: true, message: '必填项' }] }]" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="服务费金额">
          <a-input-number v-decorator="['amount', { rules: [{ required: true, message: '必填项' }] }]" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      lst: [],
      modalTitle: "新增服务费项",
      modalVisible: false,
      form: this.$form.createForm(this),
      tempItem: null,
      nameSearch: "",
      pagination: {
        pageSize: 20,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      loading: false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    onNameChange: _.throttle(function () {
      this.pagination.current = 1;
      this.loadData();
    }, 1000),
    onShowSizeChange(current, pageSize) {
      this.pagination.current = current;
      this.pagination.pageSize = pageSize;
      this.loadData();
    },
    loadData() {
      this.loading = true;
      this.$request({
        url: `/salary/api/v1/serviceCharges/selectPageByNameLike`,
        params: {
          name: this.nameSearch,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      })
        .then((res) => {
          this.lst = res.data.entities;
          this.pagination.total = res.data.entityCount;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    doAdd() {
      this.modalTitle = "新增服务费项";
      this.modalVisible = true;
      setTimeout(() => {
        this.form.setFieldsValue({
          name: undefined,
          amount: undefined
        });
      }, 0);
    },
    doEdit(item) {
      this.tempItem = item;
      this.modalTitle = "编辑服务费项";
      this.modalVisible = true;
      setTimeout(() => {
        this.form.setFieldsValue({
          name: item.name,
          amount: item.amount
        });
      }, 0);
    },
    doDel(item) {
      this.$confirm({
        title: "删除确认",
        content: "服务费项删除后将无法恢复，确认要删除吗？",
        onOk: () => {
          this.$request({
            url: `/salary/api/v1/serviceCharges/${item.id}`,
            method: "delete"
          })
            .then((res) => {
              this.$message.success("删除成功");
              this.loadData();
            })
            .catch(() => {});
        }
      });
    },
    onOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.modalTitle === "新增服务费项") {
            this.$request({
              url: `/salary/api/v1/serviceCharges`,
              method: "post",
              data: values
            })
              .then((res) => {
                this.$message.success("新增成功");
                this.onCancel();
                this.loadData();
              })
              .catch(() => {});
          } else {
            this.$request({
              url: `/salary/api/v1/serviceCharges`,
              method: "put",
              data: {
                id: this.tempItem.id,
                ...values
              }
            })
              .then((res) => {
                this.$message.success("修改成功");
                this.onCancel();
                this.loadData();
              })
              .catch(() => {});
          }
        }
      });
    },
    onCancel() {
      this.tempItem = null;
      this.modalVisible = false;
    }
  }
};
</script>
<style lang="scss"></style>
